<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-row>
          <el-col :span="8">
            <el-card>
              <div slot="header"> <span> 基本信息 </span> </div>
              <div>
                <BaseInfo :data-list="obj.data_list" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header"> <span> 身上 </span> </div>
              <div>
                <Body :goods-list="obj.body.goods_list" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header"> <span> 技能 </span> </div>
              <div>
                <Skill :skill-list="obj.skill.skill_list" />
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card>
              <div slot="header"> <span> 背包</span> </div>
              <div>
                <Bag :pet-list="obj.bag.pet_list" :goods-list="obj.bag.goods_list" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header"> <span> 银行 </span> </div>
              <div>
                <Bank :pet-list="obj.bank.pet_list" :goods-list="obj.bank.goods_list" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getUserBaseInfoApi as getObjApi
} from '@/api/user'
import Bank from '../Bank'
import Bag from '../Bag'
import Body from '../Body'
import Skill from '../Skill'
import BaseInfo from '../BaseInfo'

export default {
  name: 'UserInfo',
  components: { Body, Bank, Bag, Skill, BaseInfo },
  props: {
    userId: {
      type: Number,
      default: null
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      user_id: this.userId,
      obj: {
        data_list: [],
        bag: {
          goods_list: [],
          pet_list: []
        },
        bank: {
          goods_list: [],
          pet_list: []
        },
        body: {
          goods_list: []
        },
        skill: {
          skill_list: []
        }
      },
      initObj: {
        data_list: [],
        bag: {
          goods_list: [],
          pet_list: []
        },
        bank: {
          goods_list: [],
          pet_list: []
        },
        body: {
          goods_list: []
        },
        skill: {
          skill_list: []
        }
      }
    }
  },
  watch: {
    userId: function() {
      this.user_id = this.userId
      if (this.userId === null) {
        this.obj = Object.assign({}, this.initObj)
      } else {
        this.getObj()
      }
    },
    refresh: function() {
      if (this.refresh === true) {
        this.getObj()
      }
    }
  },
  methods: {
    getObj() {
      this.loading = true
      if (this.user_id === null) {
        this.loading = false
        return
      }
      const data = {
        obj_id: this.user_id
      }
      getObjApi(data).then(resp => {
        if (resp.code === 0) {
          this.obj.data_list = resp.data.data_list
          this.obj.body = resp.data.body
          this.obj.bank = resp.data.bank
          this.obj.bag = resp.data.bag
          this.obj.skill = resp.data.skill
          this.$emit('update:refresh', false)
        }
        this.loading = false
      })
    },
    handleUpdateObj(row) {
      this.obj.form.obj_id = row.id
      this.obj.form.status = 'update'
      this.obj.form.show = true
    }
  }
}
</script>
